<template>
  <div class="c-bg-sgray c-pv24 c-ph24">
    <div v-for="(item, index) in myPracticeList" :key="index" @click="clickExaminationItem(item.libraryId)" class="c-bg-white c-pv24 c-ph24 c-flex-row c-aligni-start c-br12 c-mb30">
      <div class="c-ww180 c-maxh120 c-text-hidden c-flex-shrink0 c-br12 c-p">
        <img class="c-w100" v-lazy="$addXossFilter(item.avatar, require('../../../assets/defult270.png'))" alt="">
        <div v-if="latelyLibraryId==item.libraryId" class="c-fs18 c-fc-white c-pa c-p-b0 c-p-r0 c-translucent-balck50 c-hh28 c-ww88 c-lh30 c-textAlign-c c-br-tl12 c-br-br12">上次做到</div>
      </div>
      <div class="c-w0 c-flex-grow1 c-ml20 c-flex-column c-justify-sb c-hh120">
        <div class="c-fs26 c-fc-xblack c-fw400 c-text-ellipsis2">{{item.name}}</div>
        <div class="c-fs22 c-fc-gray">{{item.hadTestQuestionNum}}/{{item.questionNum}} 题</div>
      </div>
    </div>
    <loading-status-tem :dataStatus="dataStatus" noDataText="暂无内容"></loading-status-tem>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
// let searchText; //搜索输入框
const LIMIT = 20;
let page = 1;
export default {
  name: "MyPracticeList",
  components: {
    loadingStatusTem
  },
  props: [],
  data() {
    return {
      myPracticeList: [],
      latelyLibraryId:'',
      dataStatus: 'HAS_MORE_DATA',
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  methods: {
    clickExaminationItem(libraryId) {
      this.$routerGo(this, "push", {
        path: "/homePage/itemBank/questionSaleDetail?",
        query: {
          libraryId: libraryId
        }
      });
    },
    getMyItemtionList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      // &limit=${LIMIT}
      utilJs.getMethod(`${global.apiurl}itemBank/myPractises?page=${page}&limit=${LIMIT}`,
        res => {
          this.latelyLibraryId = res.latelyLibraryId
          if (page == 1) {
            this.myPracticeList = res.list.data;
          } else {
            this.myPracticeList = [...this.myPracticeList, ...res.list.data];
          }
          if (res.list.data && res.list.data.length < LIMIT) {
            this.dataStatus = page == 1 && res.list.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            this.dataStatus = 'HAS_MORE_DATA';
            page++;
          }
        },
        failRes => {
          // this.dataStatus = 'DATA_ERROR';
        }
      );
    },
    //分享
    wechatShare: function () {
      let title = "练习列表"; //window.localStorage.getItem("shareTitle");
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl =
        window.location.href.split("#")[0] +
        "#/homePage/itemBank/questionList" + "?refereeId=" +
        localStorage.getItem("userId")
      let shareDesc = window.localStorage.getItem("shareDesc");
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      var shareUrl =
        window.location.href.split("#")[0] +
        "#/homePage/itemBank/questionList" + "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("", "", shareUrl, "");
    },
  },
  activated() {
    setDocumentTitle("我的练习");// eslint-disable-line
    this.latelyLibraryId = ''
    this.myPracticeList = []
    page = 1
    this.getMyItemtionList()
    this.wechatShare();
  },
  deactivated() {
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.bg-practice {
  background: linear-gradient(90deg, rgb(154, 170, 255) 0%, rgba(108, 131, 2555, 1) 100%);
}
.p-b-80 {
  bottom: -2rem;
}
</style>


